<template>
  <div class="login-box">
    <div class="login-title">
      <h2>耀莱在线运营后台管理系统</h2>
    </div>
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          <input type="text" class="form-control btn-lg" v-model="accountid" :maxlength="18" autocomplete="off"
                 placeholder="用户名">
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          <input type="password" class="form-control btn-lg" v-model="pwd" autocomplete="off" placeholder="密码"
                 @keyup.enter="loginSubmit">
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          <el-button type="primary" class="login_btn" @click="loginSubmit">登 录</el-button>
          <el-button type="warning" class="login_btn" @click="resetLoginForm">重 置</el-button>
          <!--<a href="javascript:" class="login_btn" @click="loginSubmit">登 录</a>-->
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios'
  import {mapGetters, mapActions} from 'vuex'
  export default{
    name: 'login',
    data () {
      return {
        accountid: '',
        pwd: ''
      }
    },
    computed: {
      // 映射State
      ...mapGetters([
        'apiUrl', 'isLogin'
      ])
    },
    methods: {
      ...mapActions([
        'getStorage', 'setStorage'
      ]),
      resetLoginForm () {
        this.accountid = ''
        this.pwd = ''
      },
      loginSubmit () {
        if (this.accountid === '' || this.accountid === undefined) {
          this.$notify({
            title: 'warning',
            message: this.$createElement('i', {style: 'color: red'}, '请输入用户名')
          })
          return false
        } else if (this.pwd === '' || this.pwd === undefined) {
          this.$notify({
            title: 'warning',
            message: this.$createElement('i', {style: 'color: red'}, '请输入密码')
          })
          return false
        } else {
          // 在这里写访问后台接口代码
          var params = require('qs').stringify({
            accountId: this.accountid,
            pwd: this.pwd
          })
          axios.post('/api/auth/login', params, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((response) => {
            if (response.data.code === 9999) {
              console.info(response.data.data)
              var dataToken = response.data.data.token.replace(/"/g, '')
              var dataRoleId = response.data.data.roleId
              var dataPosition = response.data.data.user.position.replace(/"/g, '')
              var dataName = response.data.data.user.name.replace(/"/g, '')
              var dataTime = response.data.data.latestLoginTime.replace(/"/g, '')
              // token
              this.setStorage({key: 'erpToken', value: dataToken})
              // 角色id
              this.setStorage({key: 'roleId', value: dataRoleId})
              // 用户角色
              this.setStorage({key: 'userRole', value: dataPosition})
              // 用户姓名
              this.setStorage({key: 'userName', value: dataName})
              // 最后登录时间
              this.setStorage({key: 'latestLoginTime', value: dataTime})
              this.$notify({
                title: 'success',
                message: this.$createElement('i', {style: 'color: teal'}, '登录成功！')
              })
              this.$router.push('/')
            } else {
              this.$notify({
                title: 'error',
                message: this.$createElement('i', {style: 'color: red'}, response.data.msg.context)
              })
              return false
            }
          })
            .catch(function (error) {
              console.log(error)
            })
        }
      }
    }
  }
</script>
<style scoped lang='less'>
  .login-box {
    text-align: center;
    margin-top: 180px;
    .login-title {
      font-size: 30px;
      text-align: center;
      padding: 20px;
    }
    .el-col {
      border-radius: 4px;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
    }
  }
</style>
